import React, { HTMLAttributes } from 'react';
import classNames from 'classnames';
import './index.less';

interface SpaceProps extends HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  className?: string;
  style?: React.CSSProperties;
  size?: 'small' | 'middle' | 'large';
  wrap?: boolean;
  direction?: 'vertical' | 'horizontal';
  align?: 'start' | 'end' | 'center' | 'baseline';
}

const spaceSize = {
  small: 8,
  middle: 16,
  large: 24,
};

export default function Space(props: SpaceProps) {
  const { size, children, direction, wrap, align, prefixCls, className, style } = props;
  const sizeNum = size ? spaceSize[size] : spaceSize.small;
  const gapStyle: React.CSSProperties = {};
  gapStyle.gap = sizeNum;

  const names = classNames(
    prefixCls,
    'ant-space',
    {
      ['ant-space-vertical']: direction === 'vertical',
      ['ant-space-wrap']: wrap,
      [`ant-space-align-${align}`]: align,
    },
    className,
  );

  return (
    <div className={names} style={{ ...gapStyle, ...style }}>
      {children}
    </div>
  );
}
